<template>
  <div class="themeTitle" >
    <div class="titleWord">
      {{title}}
    </div>
  </div>
</template>

<script>
import { inject } from "vue";
export default {
  setup(){
    const title = inject("title")
    return {
     title
    }
  }
    
}
</script>
<style lang="stylus" scoped>

  @media (max-width: 2880px)
    .themeTitle
      width:vw(370)
      height:vh(30)
      background: url('/data/images/hngk/themeTitle.png')
      background-repeat: no-repeat
      background-size: 100% 100%
      background-position:bottom left
      .titleWord
        letter-spacing :vw(1)
        font-size:vw(17)
</style>
<style lang="stylus" scoped>
  @media (min-width: 3000px)
    .themeTitle
      width:vw1(414)
      height:vh(32)
      background: url('/data/images/hngk/themeTitle.png')
      background-repeat: no-repeat
      background-size: 100% 100%
      background-position:bottom left
      .titleWord
        letter-spacing :vw1(1)
        font-size:vw1(18)
</style>